
<template>
  <view class="container">
    <Navbar showNavbar title="首页"/>
    <!-- 轮播图区域 -->
    <swiper class="banner-box" circular autoplay interval="3000" duration="500">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image class="banner-image" :src="item.url" mode="aspectFit"/>
      </swiper-item>
    </swiper>

    <div class="content">
<!--      <div class="card">-->
<!--        <div class="title font-pang">{{ voteDetail.title }}</div>-->
<!--        <div class="box">-->
<!--          <div class="item border">-->
<!--            <div class="text">{{ voteDetail.total }}</div>-->
<!--            <div class="text">累计票数</div>-->
<!--          </div>-->
<!--          <div class="item">-->
<!--            <div class="text">{{ voteDetail.count }}</div>-->
<!--            <div class="text">参与对象</div>-->
<!--          </div>-->
<!--          <div class="item border">-->
<!--            <div class="text">{{ voteDetail.visit }}</div>-->
<!--            <div class="text">累计访问</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="card">
        <div class="rule-title">
          <div class="rule-line"></div>
          <div>投票规则</div>
          <div class="rule-line"></div>
        </div>
<!--        <div class="rule-item">-->
<!--          <image class="rule-icon" src="/static/time.png"> </image>-->
<!--          <div class="rule-label">活动开始：</div>-->
<!--          <div class="rule-name">{{ voteDetail.start_time }}</div>-->
<!--        </div>-->
<!--        <div class="rule-item">-->
<!--          <image class="rule-icon" src="/static/time.png"> </image>-->
<!--          <div class="rule-label">活动结束：</div>-->

<!--          <div class="rule-name">{{ voteDetail.end_time }}</div>-->
<!--        </div>-->
        <div class="rule-item">
<!--          <image class="rule-icon" src="/static/rule.png"> </image>-->
<!--          <div class="rule-label">活动规则：</div>-->
          <div class="rule-name">{{ voteDetail.rule }}</div>
        </div>
      </div>
      <div>
        <u-row gutter="24">
          <u-col span="6" v-for="(item,index) in groupList" :key="item.id">
            <div class="list-item" @click="toDetail(item)">
              <div class="vote_number">
                <div class="vote_number_text">{{ index + 1 }}号</div>
                <div class="vote_number_text2">{{ item.voteList.length }}票</div>
              </div>
              <div class="vote-img">
                <u-image :src="item.url" mode="widthFix" width="100%"></u-image>
              </div>
              <div class="vote-text">
                <div class="vote-name">
                  {{ item.name }}
                </div>
                <div class="vote-button-right" @click.stop="vote(item)">投票</div>
              </div>
            </div>
          </u-col>
        </u-row>
      </div>

    </div>

    <u-popup length="90%" v-model="loginPopup" mode="center" border-radius="14">
      <div class="popup-box">
        <u-form style="width: 80%" :model="form" ref="uForm" label-width="80px">
          <u-form-item label="投票码"><u-input v-model="form.password" /></u-form-item>
        </u-form>
        <div class="tips">请联系工作人员索取</div>
        <!-- 底部提交按钮 -->
        <div class="button" @click="login">投票</div>
      </div>
    </u-popup>
  </view>
</template>

<script>
import Navbar from "../../components/navbar.vue";
import wxSdk from 'weixin-js-sdk'
import { mapGetters } from 'vuex'
/**
 * 获取微信配置
 */
function getWechatConfig() {
  return new Promise((resolve, reject) => {
    uni.request({
      url: '/api/weixin/wxConfig',
      method: 'GET',
      success(res) {
        resolve(res.data.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}
/**
 * 初始化微信配置
 */
function initWechatConfig(jsApiList = []) {
  return new Promise(async (resolve, reject) => {
    // 发送请求获取微信配置
    const config = await getWechatConfig()
    wxSdk.config({
      debug: false, // 开启调试模式
      appId: config.appId, // 必填，公众号的唯一标识
      timestamp: config.timestamp, // 必填，生成签名的时间戳
      nonceStr: config.nonceStr, // 必填，生成签名的随机串
      signature: config.signature, // 必填，签名
      jsApiList // 必填，需要使用的JS接口列表
    })

    wxSdk.ready(() => {
      wxSdk.onMenuShareAppMessage({
        title: '快来投上一票吧！', // 分享标题
        desc: '快来投上一票吧！', // 分享描述
        link: 'https://vote.diandian.work', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://diandian-1300713889.cos.ap-shanghai.myqcloud.com/%E6%8A%95%E7%A5%A8.png', // 分享图标
        success: function () {
          // 设置成功
        }
      })
      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      resolve()
    })

    wxSdk.error((err) => {
      console.log('报错了')
      console.log(err)
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      reject(err)
    })
  })
}
export default {
  components: {
    Navbar
  },
  computed: {
    ...mapGetters(['token', 'userInfo']),
  },
  data() {
    return {
      bannerList: [],
      loginPopup: false,
      form: {
        password: '',
      },
      // 投票详情
      voteDetail: {
        title: '最佳人气对象评选',
        total: 0,
        visit: 0,
        count: 0,
        start_time: '2024年11月2日',
        end_time: '2024年11月11日',
        rule: ''
      },
      groupList: [],
      group: {}
    }
  },
  onLoad() {
    // 设置标题
    uni.setNavigationBarTitle({
      title: '快来投上一票吧'
    })
    initWechatConfig(['onMenuShareAppMessage'])
  },
  onShow() {
    this.$store.dispatch('getUserInfo')
    // 获取banner
    this.$api.bannerList().then(res => {
      if (res.length) {
        this.bannerList = res
      }
    })
    this.$api.configList().then(res => {
      console.log(res)
     /* let start_time = res.find(item => item.code === 'start_time')
      let end_time = res.find(item => item.code === 'end_time')*/
      let vote = res.find(item => item.code === 'vote')
      // let title = res.find(item => item.code === 'title')
      // if (start_time) {
      //   this.voteDetail.start_time = start_time.desc
      // }
      // if (end_time) {
      //   this.voteDetail.end_time = end_time.desc
      // }
      if (vote) {
        this.voteDetail.rule = vote.desc
      }
      // if (title) {
      //   this.voteDetail.title = title.desc
      // }
    })
    this.$api.voteList().then(res => {
      this.voteDetail.total = res.length
    })
    this.$api.groupList().then(res => {
      this.voteDetail.count = res.length
    })

    this.getList()
    // this.$api.recordList().then(res => {
    //   let count = res || 0
    //   if (count > 99999) {
    //     count = '10w+'
    //   }
    //   this.voteDetail.visit = count
    // })
  },
  methods: {
    login() {
      if (!this.form.password) {
        uni.showToast({
          title: '请输入投票码',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 10000
      })
      this.$api.createVote({
        user_id: this.userInfo.id,
        group_id: this.group.id,
        password: this.form.password
      }).then(res => {
        uni.showToast({
          title: '投票成功',
        })
        this.form = {
          password: ''
        }
        this.loginPopup = false
        this.getList()
      }).finally(() => {
        uni.hideLoading()
      })
    },
    getList() {
      this.$api.groupList().then(res => {
        this.groupList = res.map(item => {
          return {
            ...item,
            count: item.voteList.length
          }
        })
      })
    },
    vote(item) {
      if (!this.userInfo || !this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          confirmText: '去登录',
          confirmColor: '#FF0000',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }
      this.group = item
      this.loginPopup = true
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/detail/detail?id=' + item.id
      })
    },
    submit() {
      if (!this.form.nickname) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
        uni.showToast({
          title: '请填写正确的手机号',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 10000
      })
      this.$api.login({
        nickname: this.form.nickname,
        phone: this.form.phone
      }).then(res => {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        this.userInfo = res
        uni.setStorageSync('userInfo', res)
        this.loginPopup = false
      }).finally(() => {
        uni.hideLoading()
      })
    },
  }
}
</script>

<style lang="scss">
page {
  height: 100vh;
  overflow: hidden;
}

.container {
  height: 100%;
  overflow: auto;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: linear-gradient( 180deg, #E4F6FF 0%, #F7F8FA 100%);

  .font-pang {
    font-family: 'pang';
    font-weight: 400;
    font-size: 60rpx !important;
    color: rgba(51,109,244,1) !important;
  }
  .button {
    width: 90%;
    margin: 0 auto;
    margin-top: 32rpx;
    background-color: rgba(51,109,244, 1);
    color: #ffffff;
    border-radius: 8rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
  }
  .card {
    padding: 32rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    .rule-item {
      display: flex;
      margin-top: 20rpx;
      align-items: center;
      .rule-icon {
        flex-shrink: 0;
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
      }
      .rule-label {
        font-size: 28rpx;
        flex-shrink: 0;
      }
      .rule-name {
        font-size: 28rpx;
        color: #666666;
      }
    }
    .rule-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: rgba(51,109,244,1);
      margin-bottom: 20rpx;
      .rule-line {
        width: 48rpx;
        height: 1px;
        background-color: rgba(51,109,244, 0.6);
        margin: 0 20rpx;
      }
    }
    .title {
      margin-bottom: 40rpx;
      text-align: center;
    }
    .box {
      display: flex;
      justify-content: space-between;
      background-color: rgba(51,109,244,0.8);
      padding: 40rpx 0;
      border-radius: 8rpx;
      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        .text {
          font-size: 32rpx;
          text-align: center;
          font-weight: 400;
          line-height: 40rpx;
        }
        padding: 0 12rpx;
        &.border {
          border-left: 1px solid rgba(255,255,255,0.5);
          border-right: 1px solid rgba(255,255,255,0.5);
        }
      }
    }
  }
}

.content {
  padding: 32rpx;

  .list-item {
    border-radius: 12rpx;
    background-color: #ffffff;
    overflow: hidden;
    padding: 12px;
    margin-bottom: 24rpx;
    .vote-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      .vote-name {
        font-size: 24rpx;
        height: 60rpx;
      }
    }
    .vote_number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      line-height: 34px;
      color: #333333;
      .vote_number_text2 {
        color: rgba(51,109,244,1);
      }
    }
    .vote-button-right {
      width: 100%;
      margin-top: 30rpx;
      font-size: 28rpx;
      padding: 12rpx 0;
      background-color: rgb(51,109,244);
      border-radius: 12rpx;
      text-align: center;
      color: #ffffff;
    }

    .vote-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      margin: 12rpx auto 0;
      color: #ffffff;
      height: 40rpx;
      text-align: center;
      .vote-button-left {
        flex: 1;
        font-size: 28rpx;
        padding: 10rpx 0;
        background-color: rgba(94, 185, 94, 0.26);
        color: rgba(51,109,244,1);
        margin-right: -40rpx;
        border-bottom-left-radius: 20rpx;
        border-top-left-radius: 20rpx;
      }
    }
    .list-icon {
      height: 220rpx;
      width: 100%;
    }
    .list-text {
      padding:0 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      .list-title {
        font-size: 28rpx;
        color: #000000;
        margin-bottom: 14rpx;
        text-align: center;
      }
      .list-desc {
        font-size: 24rpx;
        color: #999999;
        margin-bottom: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.popup-box {
  padding: 30rpx 0;
  .tips {
    font-size: 24rpx;
    color: red;
    text-align: center;
    margin-bottom: 5rpx;
  }
}
.popup-box {
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 32rpx 0;
    text-align: center;
  }
  .exerc-bottom {
    width: 100%;
    margin-top: 20rpx;
  }
}
.search-box {
  display: flex;
  align-items: center;
  height: 72rpx;
  background-color: #FFFFFF;
  border-radius: 36rpx;
  padding: 0 24rpx;
  margin: 24rpx 0;
}

.placeholder {
  margin-left: 16rpx;
  font-size: 14px;
  color: #999999;
}

.banner-box {
  flex-shrink: 0;
  width: 100%;
  height: 280rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.banner-content {
  position: absolute;
  top: 48rpx;
  left: 48rpx;
  color: #FFFFFF;
}

.banner-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}

.banner-subtitle {
  font-size: 14px;
  margin-bottom: 24rpx;
  display: block;
}

.banner-button {
  display: inline-block;
  padding: 12rpx 32rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24rpx;
  font-size: 14px;
}

.news-box {
  display: flex;
  align-items: center;
  //background-color: #ffffff;

  padding:12rpx 0;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}

.news-swiper {
  flex: 1;
  height: 40rpx;
}

.news-text {
  font-size: 14px;
  color: #666666;
  line-height: 40rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.grid-box {
  display: flex;
  flex-wrap: wrap;
  background-color: #F7F8FA;
  border-radius: 12rpx;
  padding: 24rpx 0;
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
}

.grid-icon {
  width: 92rpx;
  height: 92rpx;
}

.grid-text {
  font-size: 26rpx;
  color: #333333;
}

.tab-box {
  display: flex;
  margin-bottom: 24rpx;
}

.tab-item {
  font-size: 16px;
  color: #999999;
  margin-right: 48rpx;
}

.tab-item.active {
  color: #333333;
  font-weight: bold;
  position: relative;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -8rpx;
  left: 0;
  width: 100%;
  height: 4rpx;
  background-color: #1890FF;
  border-radius: 2rpx;
}
.house-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  display: flex;
}

.house-image {
  width: 240rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 32rpx;
  flex-shrink: 0;
}

.house-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 12rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.house-detail {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.location, .area, .type {
  font-size: 14px;
  color: #666666;
}
.line {
  height: 20rpx;
  width: 2rpx;
  background-color: #DCDCDC;
  margin: 0 24rpx;
}
.house-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.price {
  font-size: 20px;
  color: #FF6B6B;
  font-weight: bold;
}

.unit {
  font-size: 14px;
  color: #FF6B6B;
  margin-left: 4rpx;
}

.unit-price {
  font-size: 14px;
  color: #999999;
  margin-left: 24rpx;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #EEEEEE;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-bar-item text {
  font-size: 12px;
  color: #999999;
  margin-top: 4rpx;
}

.tab-bar-item.active text {
  color: #1890FF;
}
</style>
